<template>
  <div class="current-prriod-quantities">
    <div class="content">
        <div class="left">
            <el-tabs v-model="leftTab" :stretch="true">
                <el-tab-pane label="章次" name="1">
                    <div v-if="chapterList.length > 0" v-loading="leftLoading" class="list">
                        <div v-for="(item,index) in chapterList" :key="`project-${index}`" :class="['list-item',chapterSequence.id === item.id ? 'active':'' ]" @click="handleChapterClick(item)">
                            <TextTooltip   :content="`第${item.listSubitemCode}章 ${item.listSubitemName}`" :ref-name="`${item.id}-${item.listSubitemName}`" :class-name="`project-item`"></TextTooltip>
                            <!-- <TextTooltip   :content="item.listSubitemName" :ref-name="`${item.id}-${item.listSubitemName}`" :class-name="`project-item`"></TextTooltip> -->
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="计日工" name="2">
                    <div v-if="chapterList.length > 0" v-loading="leftLoading" class="list">
                        <div v-for="(item,index) in chapterList" :key="`project-${index}`" :class="['list-item',chapterSequence.id === item.id ? 'active':'' ]" @click="handleChapterClick(item)">
                            <TextTooltip   :content="item.listSubitemName" :ref-name="`${item.id}-${item.listSubitemName}`" :class-name="`project-item`"></TextTooltip>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div class="right">
            <div class="model-title">
                <div style="display: flex;">
                    <div style="font-weight: 600;margin-right: 4px;">第{{ chapterSequence.listSubitemCode }}章 {{ chapterSequence.listSubitemName }}</div>
                    <div>（合计：￥{{ chapterTotal }}）</div>
                </div>
                <BaseButton v-permission="{ btnCode: 'dlyh_d433_e37_2' }" @click="exportParticulars">导出计量明细表</BaseButton>
            </div>
            <el-form slot="form" :inline="true" size="medium">
                <el-form-item label="清单子目编码">
                    <el-input v-model="query.listSubitemCode" placeholder="请输入" clearable />
                </el-form-item>
                <el-form-item label="清单子目名称">
                    <el-input v-model="query.listSubitemName" placeholder="请输入" clearable />
                </el-form-item>
                <el-form-item>
                    <BaseButton @click="handleFilter">查询</BaseButton>
                    <BaseButton type="second" @click="resetConditions()">重置</BaseButton>
                </el-form-item>
            </el-form>
            <el-form ref="table-form" class="table-form">
                <BaseTable 
                ref="table" 
                v-loading="listLoading" 
                :data="list" 
                :columns="columns" 
                highlight-current-row 
                default-expand-all
                height="calc(100% - 0px)"
                row-key="id"
                :tree-props="{children: 'childrenList',hasChildren: ''}"
                >
                    <template #parentCode="{ scope: { row } }">
                        <div class="icon-flex">
                            <IconSvg v-if="!row.expanded && row.expanded !== undefined && row.hasChildren === 1" icon-class="file" class="file-icon"></IconSvg>
                            <IconSvg v-if="(row.expanded || row.expanded === undefined) && row.hasChildren === 1" icon-class="file-open" class="file-icon"></IconSvg>
                            <IconSvg v-if="row.hasChildren === 2" icon-class="catalogue" class="catalogue-icon"></IconSvg>
                            {{ row.listSubitemCode }}
                        </div>
                    </template>
                    <!-- 本期完成数量 -->
                    <template #currentPeriodQuantity="{ scope: { row, } }">
                        <div v-if="row.hasChildren === 2 && row.unitSymbol !== '金额'">
                            {{ row.currentPeriodQuantity }}
                        </div>
                    </template>
                    <!-- 本期计量金额 , 本期完成金额-->
                    <template #currentPeriodMsAmount="{ scope: { row } }">
                        <div v-if="row.hasChildren === 2 && row.unitSymbol === '金额'">
                            {{ row.currentPeriodMsAmount }}
                        </div>
                        <div v-if=" row.hasChildren === 2 && row.unitSymbol !== '金额'">
                            {{ row.currentPeriodMsAmount }}
                        </div>
                    </template>
                    <template #remark="{ scope: { row } }">
                        <div v-if="row.hasChildren === 2">
                            {{ row.remark }}
                        </div>
                    </template>
                </BaseTable>
            </el-form>
            <Pagination
                class="pagination"
                :current-page.sync="page.pageNo"
                :page-size.sync="page.pageSize"
                :total="page.total"
                @size-change="getList"
                @current-change="getList"
            />
        </div>
    </div>
  </div>
</template>
<script>
import { ProjectLedgerModel } from '@/models'

// 导出
import { ProjectLedgerApi } from '@/api'
import downLoad from '@/utils/blob-download'
export default {
    props: {
       
    },
    data() {
        return {
            leftTab: '1', // 章次，计日工
            chapterList: [],
            model: new ProjectLedgerModel(),
            chapterSequence: {}, // 当前选择的章次或者计日工
            projectId: '',
            query: {
                id: '', // 申请记录ID
                billQuantitiesType: '', // 工程类型：普通类型、计日工
                chapterSequenceCode: '', // 章次编码
                listSubitemCode: '', // 清单子目编码
                listSubitemName: ''// 清单子目名称
            },
            page: {
                pageNo: 1,
                pageSize: 10,
                total: 0
            },
            columns: [
                {
                    slot: 'parentCode',
                    attrs: {
                        label: '清单子目编码',
                        prop: 'parentCode',
                        width: 180,
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '清单子目名称',
                        prop: 'listSubitemName',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '单位',
                        prop: 'unitSymbol',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '数量',
                        prop: 'quantity',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '单价（元）',
                        prop: 'price',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '合价（元）',
                        prop: 'amount',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    slot: 'currentPeriodQuantity',
                    attrs: {
                        label: '本期完成数量',
                        prop: 'currentPeriodQuantity',
                        width: '200'
                    }
                },
                {
                    slot: 'currentPeriodMsAmount',
                    attrs: {
                        label: '本期计量金额（元）',
                        prop: 'currentPeriodMsAmount',
                        width: '200'
                    }
                },
                {
                    attrs: {
                        label: '备注',
                        prop: 'remark',
                        width: '200'
                    }
                },
            ],
            list: [],
            leftLoading: false,
            listLoading: false,
            chapterTotal: 0, // 整章的合计
         
        }
    },
    watch: {
        leftTab: {
            handler() {
                this.query.billQuantitiesType = Number(this.leftTab)
                this.chapterSequence = {}
                this.getChapterList()
            }
        },
        
    },
    methods: {
        // 导出计量明细表
        exportParticulars() {
            this.exportLoading = true
            const path = ProjectLedgerApi.applicationParticularsExportPath
            const params = {
                id: this.id,
            }
            downLoad(path, {...params}, '', 'Excel', () => {
                this.exportLoading = false
            })
        },
        // 获取左侧列表
        getChapterList() {
            const queryData = {
                msType: 2,
                type: Number(this.leftTab),
                projectId: this.projectId
            }
            this.model.chapterListById({...queryData}).then(res => {
                if (res) {
                    this.chapterList = [...res] // listSubitemCode,listSubitemName
                    // 初始化操作
                    // 保留上一步的操作,初始无值默认第一个
                    if (JSON.stringify(this.chapterSequence) === '{}') {
                        this.chapterSequence = {...this.chapterList[0]}
                        this.query.chapterSequenceCode = this.chapterList[0].listSubitemCode
                    }
                    this.getList()
                } else {
                    this.chapterList = []
                }
            })
        },       
        // 左侧点击
        handleChapterClick(item) {
            this.chapterSequence = {...item}
            this.query.chapterSequenceCode = item.listSubitemCode
            const alreadySave = true
            this.getList(alreadySave)
            // this.getTotalCount()
        },
        // 筛选
        handleFilter() {
            this.page.pageNo = 1
            this.getList()
        },
        // 重置
        resetConditions() {
            this.query.listSubitemCode = ''
            this.query.listSubitemName = ''
            this.handleFilter()
        },
        // 查询右侧列表
        getList(alreadySave = false) {
            this.listLoading = true
            this.model.currentPeriodPageList({...this.page, ...this.query}).then(res => {
                if (res) {
                    this.list = res.list
                    this.page.total = res.totalCount
                } else {
                    this.list = []
                    this.page.total = 0
                }
                this.getTotalCount()
            }).finally(() => {
                this.listLoading = false
            })
        },
        // 查询章次的总计
        getTotalCount() {
            const query = {
                id: this.id,
                billQuantitiesType: Number(this.leftTab),
                chapterSequenceCode: this.chapterSequence.listSubitemCode,
            }
            this.model.chapterTotalCount({...query}).then(total => {
                this.chapterTotal = total
            })
        },
    }
  
}
</script>
<style lang="scss" scoped>
.current-prriod-quantities{
   width: 100%;
   font-size: 14px;
   height: 500px;
   box-sizing: border-box;
   .content{
    display: flex;
   }
    .left {
      width: 280px;
      height: 100%;
      margin-right: 16px;
      flex-shrink: 0;
      border: 1px solid #f0f4f7;
      box-shadow: 0px 0px 4px 0px rgba(131, 145, 178, 0.14);
      padding: 24px 16px;
      .list {
          height: 412px;
          overflow-y: auto;
          .active{
            background: #f0f4f7;
            color: #000;
          }
          .list-item{
            cursor: pointer;
            font-size: 14px;
            padding: 8px 0px;
            display: flex;
            align-items: center;
            justify-content: center;
            
            &:hover{
              background: #f0f4f7;
              color: #000;
            }
            .icon{
              font-size: 20px;
              margin-right: 6px;
            }
          } 
      }
    }
    .right{
        flex: 1;
        .model-title{
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 12px 0px;
            border-bottom: 1px solid rgba(131, 145, 178, 0.1);
            margin-bottom: 8px;
        }
        .table-form{
            height: 72%;
            margin-top: 8px;
        }
        .pagination{
            text-align: right;
        }
        ::v-deep{
            .el-form-item{
                margin-bottom: 0px !important;
            }
        }
            /* 替换默认展开收起图片 */
            ::v-deep {
            .el-table__expand-icon {
                width: 16px;
                height: 16px;
                background: url("~@/assets/images/zhankai.png") no-repeat;
                background-size: 100% 100%;
                margin-left: -20px;
                flex-shrink: 0;
                .el-icon-arrow-right {
                    display: none;
                }
            }
            .el-table__expand-icon--expanded {
                transform: none;
                background: url("~@/assets/images/shouqi.png") no-repeat;
                background-size: 100% 100%;
                flex-shrink: 0;
            }
            .custom-td .cell {
                display: flex;
                align-items: center;
            }
            .el-table .cell.el-tooltip{
                display: flex;
                align-items: center;
            }
        }
        .icon-flex {
            display: flex;
            align-items: center;
            line-height: 1.5;

            .file-icon {
                width: 22px;
                font-size: 22px;
                margin-right: 4px;
                flex-shrink: 0;
            }
            .catalogue-icon {
                width: 20px;
                font-size: 18px;
                margin-right: 4px;
                flex-shrink: 0;
            }
        }
    }
    .btn{
        width: 100%;
        text-align: right;
    }
}
</style>
